// 视频播放器

// 定义进度条混合
.progress(){
    // 设置鼠标移入形状
    &{
        cursor: pointer;
    }
    // 进度条容器
    &>.wrap{
        width:100%;
        height:3px;
        margin-top:11px;
        position:absolute;
        background-color: #737373;
        // 进度条方块
        .inner{
            width:9px;
            height:7px;
            background-color:#fff;
            border-radius:2px;
            position:absolute;
            top:-2px;
        }
    }
    // 进度条颜色
    &>.deep{
        height:3px;
        position:absolute;
        background-color:blue;
        top:11px;
    }
}

// 设置视频控件
#wrapper{
    height:100%;
    overflow: hidden;
    position:relative;
    background-color:#383838;
    font-size:0;
    // 视频上方悬浮按钮
    .btn{
        width:100px;
        height:100px;
        position:absolute;
        transform: translateX(-50%) translateY(-50%);
        left:50%;
        top:50%;
        // 隐藏
        display:none;
        &:hover{
            color:green;
        }
        i{
            font-size:100px;
            color:#fff;
            opacity:0.5;
        }
    }
    .control{
        height:25px;
        min-width:600px;
        background-color:#2a2a2a;
        // 播放按钮
        .video-btn{
            width: 55px;
            height: 25px;
            color:#fff;
            line-height:25px;
            position:absolute;
            left:0;
            bottom:0;
            // 鼠标移入形状
            cursor:pointer;
            // 开启弹性盒
            display:flex;
            justify-content:space-around;
            &>div{
                width:9px;
                height:11px;
            }
            .reload{
                margin-right:10px;
            }
        }
        // 视频进度条
        .video-progress{
            width:1180px;
            height: 25px;
            margin:0 230px 0 55px;
            position:relative;
            // 调用混合
            .progress();
        }
        // 播放器右侧控件
        .others{
            width: 280px;
            height: 25px;
            position:absolute;
            z-index:2;
            right:0;
            bottom:0;
            display:flex;
            &>div{
                height:25px;
            }
            // 视频播放时间
            .time{
                width:120px;
                font-size:12px;
                color:#fff;
                line-height:25px;
                margin-left:8px;
            }
            // 倍速
            .speed{
               width:30px;
               height:25px;
               color:#fff;
               text-align:center;
               line-height:25px;
               font-size:13px;
               margin-right:10px;
               position:relative;
               cursor:pointer;
               ul{
                   width:100px;
                   height:180px;
                   position:absolute;
                   display:flex;
                   flex-flow: column wrap;
                   font-size:16px;
                   background-color:rgba(0,0,0,.2);
                   bottom:40px;
                   left:-35px;
                   position:all 0.5s;
                   li{
                       height:30px;
                       line-height:30px;
                   }
                   li:hover{
                       background-color:#d2d6d2;
                   }
               }
            }
            // 声音控件
            .sound{
                width:80px;
                display: flex;
                position:relative;
                &>div{
                    height:25px;
                }
                .sound-btn{
                    width:20px;
                    span{
                        display: inline-block;
                        width:12px;
                        height:12px;
                        margin-top:5px;
                        color:#fff;
                    }
                }
                .sound-progress{
                    width:60px;
                    position:relative;
                    .progress();
                }
            }
            // 全屏控件
            .full-screen{
                width:30px;
                position:relative;
                cursor:pointer;
                color:#fff;
                i{
                    position:absolute;
                    transform:translateX(-50%) translateY(-50%);
                    left:50%;
                    top:50%
                }
            }
        }
    }
}